.mw50{
  max-width: 50px !important;
}
.mw100{
  max-width: 100px !important;
}
.mw200{
  max-width: 200px !important;
}
.mw300{
  max-width: 300px !important;
}
.mw400{
  max-width: 400px !important;
}
.mw500{
  max-width: 500px !important;
}
.mw600{
  max-width: 600px !important;
}
.w50{
  width: 50px !important;
}
.w100{
  width: 100px !important;
}
.w150{
  width: 150px !important;
}
.w200{
  width: 200px !important;
}
.w300{
  width: 300px !important;
}
.w400{
  width: 400px !important;
}
.w500{
  width: 500px !important;
}
.w600{
  width: 600px !important;
}
.gray{
  color:gray;
}
.font12{
  font-size: 12px;
}
.font13{
  font-size: 13px;
}
.font14{
  font-size: 14px;
}
.font15{
  font-size: 15px;
}
.font16{
  font-size: 16px;
}
.font17{
  font-size: 17px;
}
.font18{
  font-size: 18px;
}
.font19{
  font-size: 19px;
}
.font20{
  font-size: 20px;
}
.font21{
  font-size: 21px;
}
.font22{
  font-size: 22px;
}
.font23{
  font-size: 23px;
}
.font24{
  font-size: 24px;
}
.font25{
  font-size: 25px;
}
.font26 {
  font-size: 26px;
}

.font28 {
  font-size: 28px;
}

.font30 {
  font-size: 30px;
}
.bolder{
  font-weight: bolder;
}
.bg{
  background-color: #f2f2f2;
}
.red {
  color: #f56c6c !important;
}

.orange {
  color: orange;
}

.blue {
  color: #155bd4;
}

.gray {
  color: #acacac;
}

.black {
  color: #333;
}

.white {
  color: white;
}

.sub-black {
  color:  #999;
}
.pointer {
  cursor: pointer;
}

.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-fill-item {
  flex: 1;
  width: 0;
}

.search-bar-wrapper {
  position: relative;
  margin: 0 auto 15px;
}

.search-bar-form.el-form {
  background-color: #f9f9f9;
  padding: 18px 0 0;
  border: 1px solid #ebeef5;
  transition: all 0.3s;
  overflow: hidden;
}

.search-bar-form.slide-down {
  height: 300px;
  transition: all 0.2s;
}

.search-bar-wrapper .slide-btn {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  cursor: pointer;
  font-size: 18px;
  color: #ccc;
  z-index: 5;
  transition: all 0.2s;
}

.search-bar-wrapper .slide-btn.down {
  transform: translateX(-50%) rotate(-90deg);
  transition: all 0.3s;
}

.search-bar-wrapper .slide-btn:hover {
  color: #999;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
}

.flex-start {
  display: flex;
  align-items: flex-start;
}

.flex-end {
  display: flex;
  align-items: flex-end;
}

.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center-evenly {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.flex-center-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-center-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-center-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-start-center {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.flex-end-center {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.flex-start-between {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.flex-column-center-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex-column-evenly {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.flex-column-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.el-form-item.required {
  /deep/ .el-form-item__label:before {
    content: '*';
    color: $red;
    margin-right: 2px;
    font-size: 12px;
    position: relative;
    top: 0;
  }
}

.required:before {
  content: '*';
  color: $red;
  margin-right: 2px;
  font-size: 12px;
  position: relative;
  top: 0;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}
.ml-10{
  margin-left: 10px;
}

.blue-txt {
  color: $primary;
}

.red-txt {
  color: #f00;
}

.global-search-input {
  background-color: #f9f9f9;
  border: 1px solid #ebeef5;
  min-height: 60px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  padding: 18px 0 0;
  display: flex;
  align-items: center;

  .search-item {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 18px;

    > span {
      flex-shrink: 0;
      margin: 0 10px;

      &:first-child {
        display: inline-block;
        min-width: 100px;
        text-align: right;
      }
    }
  }

  .inner {
    display: flex;
    align-items: center;
    padding: 15px;

    .txt-direction {
      text-align: right;
    }
  }
}
.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.ml-10 {
  margin-left: 10px;
}
.ml-20 {
  margin-left: 20px;
}


.mr-20 {
  margin-right: 20px;
}